<template>
  <view class="message-box">
    <view class="title">
      <text class="title-left">重要消息（{{ message.total }}）</text>
      <view class="title-right" @click="handleMore"
        >查看更多
        <wd-icon name="arrow-right"></wd-icon>
      </view>
    </view>
    <view class="list" v-if="message.total">
    <view
        class="list-item"
        v-for="item in message.list"
        :key="item.msgId"
        @click="handleDetail(item?.msgId)"
    >
        <view class="date">
          <text class="date-item first">{{ item.year }}</text>
          <text class="date-item second">{{ item.day }}</text>
        </view>
        <view class="content">
          <view class="content-title"
            ><text>{{ item.msgTitle }}</text
            ><text class="person">{{ item.sendName }}</text>
          </view>
          <view class="mes">{{ item.msgDescription }}</view>
        </view>
      </view>
    </view>
    <Empty v-else bgColor="#ffffff" />
  </view>
</template>

<script setup>
import Empty from "@/components/empty/index.vue";
import useUserStore from "@/store/modules/user/index.js";
const { message } = useUserStore();


const handleDetail = (msgId) => {
  uni.navigateTo({
    url: `/pages/messageManage/detail/detail?id=${msgId}`,
  });
};
const handleMore = () => {
  uni.navigateTo({
    // url: "/pages/messageList/messageList",
    url:"/pages/messageManage/list/list"
  });
};
</script>

<style lang="scss" scoped>
.message-box {
  margin: 20px 0;

  .title {
    margin-bottom: 10px;
    font-weight: 400;

    &-left {
      font-size: 28rpx;
      color: #131414;
    }

    &-left::before {
      content: "";
      display: inline-block;
      width: 12rpx;
      height: 12rpx;
      background-color: #409eff;
      border-radius: 50%;
      margin-right: 8px;
    }

    &-right {
      font-size: 24rpx;
      color: #86909c;
      float: right;
    }
  }

  .list {
    .list-item {
      width: 100%;
      height: 128rpx;
      background: #ffffff;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(100, 116, 139, 0.05);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      display: flex;
      padding: 25rpx;
      box-sizing: border-box;
      margin-bottom: 7px;

      .date {
        width: 50px;
        font-weight: 500;
        font-size: 28rpx;
        color: #86909c;
        margin-right: 10px;
        border-right: 4rpx solid #e2e8f0;
        padding-right: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .date-item {
          flex: 1;
        }

        .first {
          font-family: "DIN";
        }

        .second {
          font-family: "DIN";
          // font-weight: bold;
          background: linear-gradient(90deg, #007dff 0%, #83c0ff 99%);
          background-size: 100%;
          background-clip: text;
          color: transparent;
          /* 使文本颜色透明，以显示背景 */
          display: inline-block;
          /* 防止背景延伸到行间 */
        }
      }

      .content {
        display: grid;
        width: 100%;

        &-title {
          font-weight: 400;
          font-size: 24rpx;
          color: #3d3d3d;
          margin-bottom: 5px;

          .person {
            float: right;
            font-size: 20rpx;
            color: #86909c;
          }
        }

        .mes {
          font-weight: 400;
          font-size: 24rpx;
          color: #4e5969;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
